<template>
  <div class="pingjiabox">
    <el-row :gutter="10">
      <el-col :span="4">
        <h1>房客评价</h1>
      </el-col>
      <el-col :span="20"><div class="grid-content ep-bg-purple" /></el-col>
    </el-row>
    <el-row :gutter="5">
      <el-col :span="7">
        <el-rate
          v-model="totalvalue"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          style="vertical-align:middle"
        />
      </el-col>
      <el-col :span="6" style="margin-top:-5px">
        <p>{{pinlunshuliang}}条评价</p>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="pingjiacainter">
      <el-col :span="12">
        <span class="pingjiaitem">如实描述</span>
        <el-rate
          v-model="rsmsvalue"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          style="vertical-align:middle"
        />
      </el-col>
      <el-col :span="12">
        <span class="pingjiaitem">位置便利</span>
        <el-rate
          v-model="wzblvalue"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          style="vertical-align:middle"
        />
      </el-col>
    </el-row>
    <el-row :gutter="20" class="pingjiacainter">
      <el-col :span="12">
        <span class="pingjiaitem">干净卫生</span>
        <el-rate
          v-model="gjwsvalue"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          style="vertical-align:middle"
        />
      </el-col>
      <el-col :span="12">
        <span class="pingjiaitem">高性价比</span>
        <el-rate
          v-model="gxjbvalue"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value} points"
          style="vertical-align:middle"
        />
      </el-col>
    </el-row>
    <el-divider />
    <el-row class="pingjiashow" v-for='(el,index) in showarr' :key="index">
      <el-col :span="24">
        <a-comment
          :author="el.username"
          :content="el.eavcontext"
          :datetime="'发表时间'+el.createdtime"
        >
          <template #avatar>
            <a-avatar>
              <img
                alt="avatar"
                :src='baseurl+el.userimg'
              />
            </a-avatar>
          </template>
        </a-comment>
      </el-col>
      <el-divider />
    </el-row>
  </div>
</template>

<script setup>
import { ref,reactive,onMounted,getCurrentInstance} from "vue";
let {proxy} =getCurrentInstance();
let canshu=defineProps(["hid"]);
// console.log(canshu)
const baseurl="http://127.0.0.1:7001";
let totalvalue = ref(0);
let rsmsvalue=ref(0);
let wzblvalue=ref(0);
let gjwsvalue=ref(0);
let gxjbvalue=ref(0);
let pinlunshuliang=ref(0);
let showarr=ref();
// 请求用户评论得出房源总评论数和得分
onMounted(async ()=>{
  proxy.$axios(`/housetotalpinlun?hid=${canshu.hid}`);
});
// 请求房源总评论数和得分
onMounted(async ()=>{
  let res=await proxy.$axios(`/houseshowpinlun?hid=${canshu.hid}`);
  totalvalue.value=res.data.resarr[0].totalpoint.toFixed(1);
  rsmsvalue.value=res.data.resarr[0].rsmspoint.toFixed(1);
  wzblvalue.value=res.data.resarr[0].wzblpoint.toFixed(1);
  gjwsvalue.value=res.data.resarr[0].gjwspoint.toFixed(1);
  gxjbvalue.value=res.data.resarr[0].gxjbpoint.toFixed(1);
  pinlunshuliang.value=res.data.resarr[0].pinluncount;
});
// 请求用户评论
onMounted(async ()=>{
  let result=await proxy.$axios(`/pinglunxiangqing?hid=${canshu.hid}`);
  // console.log(result.data);
  showarr.value=result.data.sqlres.filter((el)=>{
    if(!el.eavcontext == ''){
      return true;
    }
  });
  // console.log(showarr);
});
</script>

<style lang='scss' scoped>
.pingjiacainter {
  margin-top: 10px;
  .pingjiaitem {
    margin-right: 20px;
  }
}
.pingjiashow {
  img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    vertical-align: middle;
  }
}
</style>